"use client"

import { useState } from "react"

interface PracticeDisplayProps {
  char: string
}

export function PracticeDisplay({ char }: PracticeDisplayProps) {
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
  const [selectedAnswer, setSelectedAnswer] = useState<number | null>(null)
  const [showResult, setShowResult] = useState(false)

  // 模拟练习题数据
  const questions = [
    {
      question: `"${char}"字的拼音是什么？`,
      options: ['mù', 'mú', 'mǔ', 'mò'],
      answer: 0
    },
    {
      question: `"${char}"字有几画？`,
      options: ['3画', '4画', '5画', '6画'],
      answer: 1
    },
    {
      question: `下面哪个词语包含"${char}"字？`,
      options: ['石头', '木头', '水头', '火头'],
      answer: 1
    }
  ]

  const currentQuestion = questions[currentQuestionIndex]

  const selectAnswer = (answerIndex: number) => {
    setSelectedAnswer(answerIndex)
    setShowResult(true)
    
    // 2秒后自动切换到下一题
    setTimeout(() => {
      if (currentQuestionIndex < questions.length - 1) {
        setCurrentQuestionIndex(currentQuestionIndex + 1)
        setSelectedAnswer(null)
        setShowResult(false)
      } else {
        // 练习完成
        setCurrentQuestionIndex(0)
        setSelectedAnswer(null)
        setShowResult(false)
      }
    }, 2000)
  }

  const prevQuestion = () => {
    if (currentQuestionIndex > 0) {
      setCurrentQuestionIndex(currentQuestionIndex - 1)
      setSelectedAnswer(null)
      setShowResult(false)
    }
  }

  const nextQuestion = () => {
    if (currentQuestionIndex < questions.length - 1) {
      setCurrentQuestionIndex(currentQuestionIndex + 1)
      setSelectedAnswer(null)
      setShowResult(false)
    }
  }

  return (
    <div className="w-full h-full bg-gradient-to-br from-pink-400 via-purple-400 to-purple-500 p-6 flex flex-col relative overflow-hidden">
      {/* 头部 */}
      <div className="text-center mb-6 relative z-10">
        <h2 className="text-3xl font-black text-white mb-2 drop-shadow-lg">
          练习时间
        </h2>
        <p className="text-lg text-white/90">
          让我们来检验一下学习成果吧！
        </p>
      </div>

      {/* 进度指示器 */}
      <div className="flex justify-center gap-2 mb-6 relative z-10">
        {questions.map((_, index) => (
          <div
            key={index}
            className={`h-2 rounded-full transition-all duration-300 ${
              index === currentQuestionIndex
                ? 'w-6 bg-white'
                : 'w-2 bg-white/50'
            }`}
          />
        ))}
      </div>

      {/* 题目卡片 */}
      <div className="flex-1 flex items-center justify-center relative z-10">
        <div className="w-full max-w-xl bg-white rounded-2xl p-8 shadow-2xl">
          {/* 题目编号 */}
          <div className="text-base text-purple-500 font-bold mb-3">
            第{currentQuestionIndex + 1}题
          </div>

          {/* 题目内容 */}
          <div className="text-2xl font-bold text-gray-800 mb-6">
            {currentQuestion.question}
          </div>

          {/* 选项 */}
          <div className="grid grid-cols-2 gap-3">
            {currentQuestion.options.map((option, index) => (
              <button
                key={index}
                onClick={() => !showResult && selectAnswer(index)}
                disabled={showResult}
                className={`
                  p-4 text-lg font-semibold rounded-xl transition-all duration-300 border-3
                  ${!showResult
                    ? 'border-gray-200 bg-gray-50 hover:border-purple-400 hover:bg-purple-50 hover:transform hover:scale-105'
                    : selectedAnswer === index
                      ? index === currentQuestion.answer
                        ? 'border-green-500 bg-green-100 text-green-700'
                        : 'border-red-500 bg-red-100 text-red-700'
                      : index === currentQuestion.answer
                        ? 'border-green-500 bg-green-100 text-green-700'
                        : 'border-gray-200 bg-gray-50 text-gray-400'
                  }
                `}
              >
                {option}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* 导航按钮 */}
      <div className="flex justify-center gap-4 mt-6 relative z-10">
        <button
          onClick={prevQuestion}
          disabled={currentQuestionIndex === 0}
          className="w-12 h-12 bg-white text-purple-500 rounded-full text-xl font-bold shadow-xl hover:shadow-2xl transition-all duration-300 hover:transform hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          ←
        </button>
        <button
          onClick={nextQuestion}
          disabled={currentQuestionIndex === questions.length - 1}
          className="w-12 h-12 bg-white text-purple-500 rounded-full text-xl font-bold shadow-xl hover:shadow-2xl transition-all duration-300 hover:transform hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          →
        </button>
      </div>
    </div>
  )
} 